iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0

在 JavaScript 中,每個物件都有一個隱藏的屬性,稱為 [[Prototype]]。這個屬性指向另一個物件,即該物件的原型(prototype)。通過這種原型機制,JavaScript 可以實現物件之間的屬性和方法繼承。

  • 原型鏈(Prototype Chain):每個物件的 [[Prototype]] 都是一個物件,如果在一個物件中找不到某個屬性或方法,JavaScript 會沿著這個原型鏈向上查找,直到找到該屬性或方法,或者到達鏈的頂端(即 null)。這種機制被稱為原型鏈

  • proto 屬性:proto 是用來訪問物件的 [[Prototype]] 的一個屬性。儘管大多數 JavaScript 引擎都支持 proto,但在實際開發中更推薦使用標準的方法,如 Object.getPrototypeOf(obj) 和 Object.setPrototypeOf(obj, prototype)。

  • 共享方法的好處:將方法定義在原型上,所有的實例物件都可以共享這些方法,從而節省內存。例如,在用 function 定義構造函數時,可以將通用的方法添加到其 prototype 上,這樣所有該構造函數的實例都可以訪問這些方法。


實際應用上:
以下是一些實戰中常見的應用場景及注意事項:

  • 使用原型來共享方法:在需要多個物件實例共享相同方法時,將方法放在原型上可以避免為每個實例複製相同的方法。例如,當創建一個 Person 類別時,可以將通用的 greet 方法放在 Person.prototype 上,這樣所有的 Person 實例都能共享這個方法。
function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
const bob = new Person('Bob');

alice.greet(); // Hello, my name is Alice
bob.greet();   // Hello, my name is Bob
  • 原型繼承:通過原型鏈實現物件繼承是 JavaScript 中的一個強大功能。例如,一個 Dog 類別可以繼承 Animal 類別的屬性和方法,這樣所有 Dog 的實例都能自動擁有 Animal 的行為,並且可以添加特定於 Dog 的新方法。
function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name, breed) {
    Animal.call(this, name); // 繼承屬性
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 繼承方法
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.eat(); // Buddy is eating
myDog.bark(); // Buddy is barking
  • 避免修改內建物件的原型:修改內建物件(如 Array.prototype 或 Object.prototype)的原型可能會導致難以預測的錯誤和兼容性問題,尤其是在使用第三方庫時。最好避免這種做法,以保持代碼的穩定性和可預測性。
  • 小心使用 proto:雖然 proto 可以用來查看或設置物件的原型,但它並不是標準化的屬性,某些情況下可能會導致兼容性問題。使用 Object.getPrototypeOf(obj) 和 Object.setPrototypeOf(obj, prototype) 更為安全。
  • 現代語法糖:class:在 ES6 中引入的 class 語法提供了一種更直觀的方式來建立與繼承物件。雖然它看起來類似以往的物件導向,但它在背後仍然使用原型機制。class 語法使程式更簡潔和易於理解。


上一篇
[Day 28] 甚麼是MVC架構?
下一篇
[Day 30] 回顧所學
系列文
讀書筆記&心得-看完這本就會懂!帶你無痛提升JavaScript面試力:精選55道前端工程師的核心問題 × 求職加分模擬試題解析30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言